<template>
  <div
    style="
      width: 1800px;
      height: 920px;
      margin-left: -20px;
      margin-top: -20px;
      display: block;
    "
  >
    <div style="width: 1500px; height: 200px"></div>
    <div
      style="
        width: 600px;
        height: 400px;
        background-color: white;
        margin-left: 530px;
      "
    >
      <el-card class="box-card" style="background-color:aqua">
        <template #header>
          <div class="card-header">
            <span><b>修改密码</b></span>
          </div>
        </template>
        <div class="text-item">
          <el-form
            ref="ruleFormRef"
            :rules="rules"
            :model="user"
            status-icon
            label-width="120px"
            class="demo-ruleForm"
            style="margin-top:30px"
          >
            <el-form-item label="原密码" prop="password">
              <el-input
                v-model="user.password"
                disabled
              />
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input
                v-model="user.newPassword"
                type="password"
                placeholder="请输入新密码"
              />
            </el-form-item>
            <el-form-item label="确认密码" prop="chirmPassword">
              <el-input
                type="password"
                v-model="user.chirmPassword"
                placeholder="请确认密码"
              />
            </el-form-item>
            <el-form-item >
              <el-button type="primary" 
                style="margin-top:10px" @click="update()">确认修改</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {updateUser} from "../../api/index"
export default {
    data(){
        const validatePassword = (rule,value,callback) =>{
          if(value === ''){
            callback(new Error('请确认密码'))
          }else if(value !== this.user.newPassword){
            callback(new Error('确认密码错误'))
          }else{
            callback()
          }
        }
        return{

            user:JSON.parse(localStorage.getItem("user")),
            rules:{
                newPassword:[
                    {required:true,message:"请输入新密码",trigger:'blur'},
                ],
                chirmPassword:[
                    {validator:validatePassword,required:true,trigger:'blur'},
                ]
            }
        }
    },
    methods:{
        update(){
            this.$refs.ruleFormRef.validate((valid)=>{
                if(valid){
                    this.user.password=this.user.newPassword;
                    //保存当前的用户数据到数据库
                    updateUser(this.user).then(res=>{
                        if(res.code === "200"){
                            //成功更新
                            this.$message.success("保存成功");
                            localStorage.removeItem("user");
                            this.$router.push("/");
                        }else{
                            this.$message.error(res.message);
                        }
                    })
                }
            })
        }
    }
}
</script>

<style scoped>
.box-card {
  width: 600px;
  height: 400px;
}
b {
  font-size: 30px;
  color: darkblue;
}
.card-header {
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-input{
    margin-right: 80px;
    min-height: 40px;
}
</style>
<style >
.el-form-item__label{
  font-weight: bold;
}

</style>